<template>
  <div>
    <!-- 轮播图区域 -->
    <div style="padding-bottom: 15px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="DialogCarouselForm = true"
            >添加轮播图</el-button
          >
          <span>轮播图</span>
        </div>
        <el-table :data="CarouselDate" style="width: 100%">
          <el-table-column label="详细" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.CarouselId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图片地址" width="280" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.CarouselUrl }}</span>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="200" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">
                {{ scope.row.CarouselDate }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="CarouselEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="CarouselDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 增加轮播图弹出框 -->
      <el-dialog title="轮播图详细" :visible.sync="DialogCarouselForm">
        <el-form :model="CarouselForm">
          <el-form-item label="详细" :label-width="AllFormWidth">
            <el-input
              v-model="CarouselForm.CarouselId"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片地址" :label-width="AllFormWidth">
            <el-input
              v-model="CarouselForm.CarouselUrl"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="AllFormWidth">
            <el-input
              v-model="CarouselForm.CarouselDate"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="DialogCarouselForm = false">取 消</el-button>
          <el-button type="primary" @click="CarouselAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- Blog日志管理区域 -->
    <div style="padding-bottom: 15px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Blog日志管理</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="DialogLogForm = true"
            >添加日志</el-button
          >
        </div>
        <el-table :data="LogDate" style="width: 100%">
          <el-table-column label="编号" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.LogId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="内容" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.LogText }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发布日期" width="280" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.LogDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.LogRemarks }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="LogEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="LogDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 增加日志弹出框 -->
      <el-dialog title="日志信息" :visible.sync="DialogLogForm">
        <el-form :model="LogForm">
          <el-form-item label="编号" :label-width="AllFormWidth">
            <el-input v-model="LogForm.LogId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="AllFormWidth">
            <el-input v-model="LogForm.LogText" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发布日期" :label-width="AllFormWidth">
            <el-input v-model="LogForm.LogDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="AllFormWidth">
            <el-input
              v-model="LogForm.LogRemarks"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="DialogLogForm = false">取 消</el-button>
          <el-button type="primary" @click="LogAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 关于Bsea区域 -->
    <div style="padding-bottom: 15px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>关于Bsea</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="DialogAboutForm = true"
            >添加Bsea</el-button
          >
        </div>
        <el-table :data="AboutBseaDate" style="width: 100%">
          <el-table-column label="表头" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.AboutTitle }}</span>
            </template>
          </el-table-column>
          <el-table-column label="颜色" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.AboutColor }}</span>
            </template>
          </el-table-column>
          <el-table-column label="内容" width="280" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.AboutText }}</span>
            </template>
          </el-table-column>
          <el-table-column label="icon" width="200" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.AboutIcon }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="AboutBseaEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="AboutBseaDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 增加关于Bsea弹出框 -->
      <el-dialog title="添加信息" :visible.sync="DialogAboutForm">
        <el-form :model="AboutBseaForm">
          <el-form-item label="表头" :label-width="AllFormWidth">
            <el-input
              v-model="AboutBseaForm.AboutTitle"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="颜色" :label-width="AllFormWidth">
            <el-input
              v-model="AboutBseaForm.AboutColor"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="AllFormWidth">
            <el-input
              v-model="AboutBseaForm.AboutText"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="AllFormWidth">
            <el-input
              v-model="AboutBseaForm.AboutIcon"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="DialogAboutForm = false">取 消</el-button>
          <el-button type="primary" @click="AboutBseaAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import { request } from "../../network/request";
export default {
  name: "AdminHomeIndex",
  data() {
    return {
      // 所有弹出窗宽度
      AllFormWidth: "100px",
      // 轮播图数据
      CarouselDate: [],
      CarouselForm: {
        LogId: "",
        LogText: "",
        LogRemarks: "",
        LogDate: "",
        AboutColor: "",
        AboutIcon: "",
        AboutTitle: "",
        AboutText: "",
        CarouselId: "",
        CarouselUrl: "",
        CarouselDate: "",
      },
      DialogCarouselForm: false,
      // 日志数据
      LogDate: [],
      DialogLogForm: false,
      LogForm: {
        LogId: "",
        LogText: "",
        LogRemarks: "",
        LogDate: "",
        AboutColor: "",
        AboutIcon: "",
        AboutTitle: "",
        AboutText: "",
        CarouselId: "",
        CarouselUrl: "",
        CarouselDate: "",
      },
      //关于Bsea
      DialogAboutForm: false,
      AboutBseaDate: [],
      AboutBseaForm: {
        LogId: "",
        LogText: "",
        LogRemarks: "",
        LogDate: "",
        AboutColor: "",
        AboutIcon: "",
        AboutTitle: "",
        AboutText: "",
        CarouselId: "",
        CarouselUrl: "",
        CarouselDate: "",
      },
    };
  },
  created() {
    request({
      url: "admin/gethomeindex",
      method: "GET",
    })
      .then((res) => {
        for (var i = 0; i < eval(res.data.date).length; i++) {
          if (
            eval(res.data.date)[i]["AboutColor"] != "" &&
            eval(res.data.date)[i]["AboutIcon"] != "" &&
            eval(res.data.date)[i]["AboutTitle"] != "" &&
            eval(res.data.date)[i]["AboutText"] != ""
          ) {
            this.AboutBseaDate.push(eval(res.data.date)[i]);
          }
          if (
            eval(res.data.date)[i]["CarouselDate"] != "" &&
            eval(res.data.date)[i]["CarouselId"] != "" &&
            eval(res.data.date)[i]["CarouselUrl"] != ""
          ) {
            this.CarouselDate.push(eval(res.data.date)[i]);
          }
          if (
            eval(res.data.date)[i]["LogDate"] != "" &&
            eval(res.data.date)[i]["LogId"] != "" &&
            eval(res.data.date)[i]["LogRemarks"] != "" &&
            eval(res.data.date)[i]["LogText"] != ""
          ) {
            this.LogDate.push(eval(res.data.date)[i]);
          }
        }
        // console.log(
        //   this.AboutBseaDate[0],
        //   this.LogDate[0],
        //   this.CarouselDate[0]
        // );
        // this.CarouselDate.push(eval(res.data.date));
        // this.AboutBseaDate.push(eval(res.data.date));
        // this.LogDate.push(eval(res.data.date));
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 轮播图修改
    CarouselEdit(index, row) {
      this.$prompt("请输入地址", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          row.CarouselUrl = value;
          // this.tableDate[index].url = value;
          this.$message({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    // 轮播图删除
    CarouselDelete(index) {
      request({
        url: "/admin/deletehomeindex",
        method: "POST",
        data: { id: "1", CarouselId: this.CarouselDate[index]["CarouselId"] },
      })
        .then((res) => {
          this.CarouselDate.splice(index, 1);
          this.$message({
            type: "info",
            message: "删除成功",
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 轮播图增添
    CarouselAdd() {
      this.DialogCarouselForm = false;
      this.CarouselDate.push(this.CarouselForm);
      request({
        url: "/admin/addhomeindex",
        method: "POST",
        data: { message: this.CarouselForm },
      })
        .then((res) => {
          console.log(res, this.CarouselForm);
          this.CarouselForm = {
            LogId: "",
            LogText: "",
            LogRemarks: "",
            LogDate: "",
            AboutColor: "",
            AboutIcon: "",
            AboutTitle: "",
            AboutText: "",
            CarouselId: "",
            CarouselUrl: "",
            CarouselDate: "",
          };
          this.$message({
            message: "增添成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // Blog日志修改
    LogEdit(index, row) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          row.LogText = value;
          // this.LogDate[index].url = value;
          // request({
          //   url:'/admin/updatehomeindex',
          //   method:'PATCH',
          //   data: { username: this.forms.username, password: this.forms.password }
          // })
          // this.$message({
          //   type: "success",
          //   message: "修改成功",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    // Blog日志删除
    LogDelete(index) {
      // console.log(index, row);
      request({
        url: "/admin/deletehomeindex",
        method: "POST",
        data: { id: "2", LogId: this.LogDate[index]["LogId"] },
      })
        .then((res) => {
          this.LogDate.splice(index, 1);
          this.$message({
            type: "info",
            message: "删除成功",
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // Blog日志增加
    LogAdd() {
      this.DialogLogForm = false;
      this.LogDate.push(this.LogForm);
      console.log(this.LogForm);
      request({
        url: "/admin/addhomeindex",
        method: "POST",
        data: { message: this.LogForm },
      })
        .then((res) => {
          console.log(res);
          this.LogForm = {
            LogId: "",
            LogText: "",
            LogRemarks: "",
            LogDate: "",
            AboutColor: "",
            AboutIcon: "",
            AboutTitle: "",
            AboutText: "",
            CarouselId: "",
            CarouselUrl: "",
            CarouselDate: "",
          };
          this.$message({
            message: "增添成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 关于Bsea修改
    AboutBseaEdit(index, row) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          // this.tableData[index].url = value;
          row.AboutText = value;
          this.$message({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    // 关于Bsea删除
    AboutBseaDelete(index) {
      request({
        url: "/admin/deletehomeindex",
        method: "POST",
        data: { id: "3", AboutTitle: this.AboutBseaDate[index]["AboutTitle"] },
      })
        .then((res) => {
          this.AboutBseaDate.splice(index, 1);
          this.$message({
            type: "info",
            message: "删除成功",
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 关于Bsea增加
    AboutBseaAdd() {
      this.DialogAboutForm = false;
      this.AboutBseaDate.push(this.AboutBseaForm);
      request({
        url: "/admin/addhomeindex",
        method: "POST",
        data: { message: this.AboutBseaForm },
      })
        .then((res) => {
          console.log(res);
          this.AboutBseaForm = {
            LogId: "",
            LogText: "",
            LogRemarks: "",
            LogDate: "",
            AboutColor: "",
            AboutIcon: "",
            AboutTitle: "",
            AboutText: "",
            CarouselId: "",
            CarouselUrl: "",
            CarouselDate: "",
          };
          this.$message({
            message: "增添成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>